<template>
  <el-dialog title="新增员工" :visible.sync="showDialog" @close="formData={}">
    <!-- 表单验证三要素： -->
    <!-- ①  el-form 需要有model属性； 要有rule属性用于校验规则； ref属性  -->
    <!-- ②  el-form-item 需要有prop属性 -->
    <!-- ③  el-input 需要有v-model绑定 -->
    <el-form :model="formData" :rules="rules" ref="form" label-width="120px">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择日期" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择" >
          <el-option 
            v-for="item in hireType" 
            :key="item.id" 
            :label="item.value" 
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <!-- 渲染数据 -->
        <!--  options 是级联选择器的数据-->
        <!--  props 是展示的规则  label是文字的字段，value是给v-model的字段 ;checkStrictly 可以选择任意一级 -->
        <el-cascader
            v-model="formData.departmentName"
            :options="departData"
            :props="{ label:'name',value:'name',checkStrictly: true }"
            @click.native="loadDepartData"
            placeholder="请选择部门"></el-cascader>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择日期" />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="showDialog=false">取消</el-button>
          <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import employees from '@/api/constant/employees'
import {  addEmployee } from "@/api/employees";
export default {
  data () {
    return {
      // 表单数据对象
      formData: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      },
      // 表单验证规则
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 1, max: 4, message: '用户姓名为1-4位'}
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '入职时间', trigger: 'blur' }
        ]
      },
      // 部门数据
      departData:[],
      // 聘用形式
      hireType:employees.hireType,
      // 弹框打开
      showDialog:false
    }
  },
  methods: {
    // 获取部门数据的方法
    async loadDepartData() {
      // 1. 发送请求(封装请求方法[分析接口]、导入请求方法)
      let { depts } = await getDepartments()
      // 2. 失败处理(响应拦截器已经集中处理)
      // 3. 成功处理(加工数据、赋值变量)
      this.departData = tranListToTreeData(depts,'')
    },
    // 确定事件
    async btnOk(){
      // 1. 主动校验表单数据
      // this.$refs.form.validate(function(valid){  valid 是布尔值表示验证是否通过 })
      // validate方法，返回一个promise，如果验证失败则抛出错误状态
      await this.$refs.form.validate()
      // 2. 拷贝加工处理数据(有可能); 发送请求
      // 错误的，破坏了departmentName,本来是一个数组，现在变成了字符串，这样级联选择器就会有问题
      // this.formData.departmentName = this.formData.departmentName[this.formData.departmentName.length-1]
      const data = JSON.parse(JSON.stringify(this.formData))
      data.departmentName = data.departmentName[data.departmentName.length-1]
      // 3. 成功提示，失败处理
      await addEmployee(data)
      this.$message.success('添加成功')
      // 4. 列表更新(子父通信)
      this.$emit('update-list')
      // 5. 表单重置、关闭
      this.showDialog = false
    }
  },
  // created () {
  //   // 调用获取数据方法
  //   this.loadDepartData()
  // },
}
</script>

<style>

</style>
